<div class="wmm-module">
    <div class="layui-form-item">
        <div class="layui-inline">
            <form action="javascript:;" id="search-form">
                    <button type="button" class="layui-btn layui-btn-sm  layui-btn-normal" onclick="renders.box(true)"><i
                        class="layui-icon layui-icon-add-circle "></i> 添加平台</button>
            </form>
            
        </div>
    </div>


    <div>
        <div id="appTable"></div>
    </div>
</div>



<template id="tmp-app-form">
    <div style="padding:10px">
        <form class="layui-form" lay-filter="app-form" action="javascript:;">
            <input type="hidden" value="" name="id" />
            <div class="layui-form-item">

                <label class="layui-form-label">平台名称<span class="required-star">*</span></label>
                <div class="layui-input-block">
                    <input type="text" name="appName" lay-verify="required|length" placeholder="请输入平台名称" autocomplete="off"
                        class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">平台描述<span class="required-star">*</span></label>
                <div class="layui-input-block">
                    <input type="text" name="description" lay-verify="required|length" placeholder="请输入平台描述"
                        autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn  layui-btn-sm lay-submit layui-btn-normal" lay-submit lay-filter="app">立即提交</button>
                    <button type="reset" class="layui-btn  layui-btn-sm layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</template>



<script>
    new Wmm({
        //页面变量
        vars: {
            table: {}
        },
        imports: ["datatable", "form", "api", "sysTools"],

        methods: {
        },

        //页面事件注册
        listener: function () {
            var form = fb.form;
            form.on('submit(app)', function (data) {
                var dataObject = data.field;
                if (dataObject.id) {
                    //update
                    fb.api.app.update(dataObject, function () {
                        layer.closeAll();
                        layer.msg("修改成功");
                        renders.flush();
                        sysTools.cleanAppList();
                    });
                    return;
                }
                //insert
                fb.api.app.add(dataObject, function () {
                    layer.closeAll();
                    layer.msg("添加成功");
                    renders.flush();
                    sysTools.cleanAppList();
                });
            });

            fb.form.verify({
                length: function (value) {
                    var maxLength = 32;
                    if (value.length > maxLength) {
                        return '输入字符长度不能超过' + maxLength + '位';
                    }
                },
                length128: function (value) {
                    var maxLength = 128;
                    if (value.length > maxLength) {
                        return '输入字符长度不能超过' + maxLength + '位';
                    }
                },
            });



        },

        //渲染对象
        renders: {
            flush: function () {
                vars.table.flush();
            },

            renderPageBar: function () {

            },

            render: function () {
                vars.table = new DataTable({
                    el: "appTable",
                    url: "/sys-applications",

                    defines: [
                        {
                            head: "APPID",
                            prop: "id"
                        },
                        {
                            head: "平台名称",
                            prop: "app_name",
                        }, {
                            head: "平台描述",
                            prop: "description",
                        }, {
                            head: "实例个数",
                            prop: "instance_count",
                        }, {
                            head: "创建时间",
                            prop: "gmt_create",
                            type: "datetime",

                        },
                    ],
                    handles: [
                        {
                            edit: function (data) {
                                renders.box(false, data);
                            }
                        },
                        {
                            name: "实例管理",
                            color: "purple",
                            edit: function (data) {
                                fb.router.route({
                                    url: "/fastboot/pages/sys/instance",
                                    pushState: data
                                });
                            }
                        },
                        {
                            del: {
                                tip: "确定要删除吗？",
                                do: function (data) {
                                    fb.api.app.delete(data.id, function () {
                                        layer.closeAll();
                                        layer.msg("删除成功");
                                        renders.flush();

                                    })
                                }
                            }
                        },

                    ],
                });
            },
            //添加修改
            box: function (isCreate, data) {
                var title = "添加";
                if (!isCreate) {
                    title = "修改";
                }
                layer.open({
                    type: 1,
                    title: title + "平台",
                    content: document.querySelector("#tmp-app-form").innerHTML,
                    area: ['500px', '250px'],
                    success: function () {
                        if (!isCreate) {
                            fb.form.val('app-form', data)
                        }
                    }
                });
            },
        },
    });
</script>